import Taro from '@tarojs/taro'
import {Text, View} from '@tarojs/components'
import {connect} from '@tarojs/redux'
import MenuBar from "../../components/menu_bar";
import {AtButton, AtDivider, AtTag} from 'taro-ui'

import './index.less'
import request from "../../utils/request";
import config from "../../config";

@connect(state => ({
  customer: state.customer,
}))
export default class Index extends Taro.Component {

  config = {
    navigationBarTitleText: '个人中心'
  }

  constructor () {
    super(...arguments)

    this.state = {
      phone: '',
    }
  }

  componentDidShow() {
    if (Taro.getStorageSync('sys_user_info')) {
      this.setState({
        phone: Taro.getStorageSync('sys_user_info')['phone'],
      });
    } else {
      this.login();
    }
  }

  login = () => {
    if (!Taro.getStorageSync('openid')) {
      Taro.login({
        success: (res) => {
          if (res.code) {
            request(`${config.apiPrefix}/weapps_login?code=${res.code}`).then(res => {
              if (res && res.code === config.resultCode.ERR_OK) {
                Taro.setStorageSync('openid', res.data.openid)
                Taro.setStorageSync('session_key', res.data.session_key)

                this.getCustomerInfoByOpenid(res.data.openid)
              } else {
                console.log('登录失败！' + res.message)
              }
            });
          } else {
            console.log('登录失败！' + res.errMsg)
          }
        }
      });
    } else {
      this.getCustomerInfoByOpenid(Taro.getStorageSync('openid'))
    }
  }

  // get customer info by openid
  getCustomerInfoByOpenid = openid => {
    request(`${config.apiPrefix}/customers_get_by_openid?openid=${openid}`).then(res => {
      if (res && res.code === config.resultCode.ERR_OK) {
        Taro.setStorageSync('sys_user_info', res.data)

        this.setState({
          phone: Taro.getStorageSync('sys_user_info')['phone'],
        });
      } else {
        console.log(res.message)
      }
    });
  }

  toRegister = () => {
    Taro.navigateTo({
      url: '/pages/register/index',
    });
  }

  call = () => {
    Taro.makePhoneCall({
      phoneNumber: '18352513572',
      success: function (res) {
        console.log("接口调用成功返回的回调")
      },
      fail: function (res) {
        console.log("接口调用失败返回的回调")
      },
      complete: function (res) {
        console.log("接口调用结束的回调函数（调用成功、失败都会执行）")
      }
    })
  }

  render() {
    const {phone} = this.state;
    const menuList = [{
      id: 1,
      icon: 'iconfont icon-favorite',
      bgColor: '#3cf',
      name: '我的关注',
      url: `/pages/favorite/index`,
    }, {
      id: 3,
      icon: 'iconfont icon-fabu',
      bgColor: '#9c3',
      name: '我的发布',
      url: `/pages/webview/index?url=https://mp.weixin.qq.com/s/dhGqYhLpp_2ZzdUwn6GVAA`,
    }, {
      id: 3,
      icon: 'iconfont icon-dianhua',
      bgColor: '#f93',
      name: '联系我们',
      url: `/pages/webview/index?url=https://mp.weixin.qq.com/s/dhGqYhLpp_2ZzdUwn6GVAA`,
    }, {
      id: 4,
      icon: 'iconfont icon-shiyongshuoming',
      bgColor: '#c6c',
      name: '操作说明',
      url: `/pages/webview/index?url=https://mp.weixin.qq.com/s/dhGqYhLpp_2ZzdUwn6GVAA`,
    }];

    return (
      <View className='container'>
        <View className='header'>
          <View className='userinfo'>
            <View className='avatar-wrapper'>
              <open-data type='userAvatarUrl'></open-data>
            </View>
            <View className='nickname-wrapper'>
              <open-data type='userNickName'></open-data>
            </View>
            <View className='phone-wrapper'>
              {
                phone
                ? <Text>{phone}</Text>
                : <View>
                    <Text class='text'>尚未绑定手机</Text><AtTag size='small' circle onClick={this.toRegister}>绑定</AtTag>
                  </View>
              }
            </View>
          </View>
        </View>

        <View className='content'>
          <View className='card'>
            {/*<MenuBar menuList={menuList}/>*/}
            <View className='panel'>
              <View className='head'>
                <Text class='title'>我的发布</Text>
              </View>
              <View className='body with-padding'>
                <View className='audit-wrapper'>
                  <View className='item'>
                    <Text className='num'>0</Text>
                    <Text className='text'>审核通过</Text>
                  </View>
                  <View className='item'>
                    <Text className='num'>0</Text>
                    <Text className='text'>审核中</Text>
                  </View>
                  <View className='item'>
                    <Text className='num'>0</Text>
                    <Text className='text'>审核未通过</Text>
                  </View>
                </View>
              </View>
            </View>
          </View>
        </View>
      </View>
    )
  }
}

